<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>历史数据</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.depicker.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css" />
		<link rel="stylesheet" type="text/css" href="css/comment.css" />
		<link rel="stylesheet" type="text/css" href="css/eqParameter.css" />
		<link rel="stylesheet" type="text/css" href="css/dataHistory.css" />
	</head>

	<body>
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-slide-in">
			<div id="backdrop" class="mui-off-canvas-backdrop"></div>
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-right">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						<div class="canvasBox">
							<div>设备名称</div>
							<div class="canvasTime">
								<input class="timeText" type="text" value="" placeholder="" />
							</div>
							<div>开始时间</div>
							<div class="canvasTime">
								<input class="timeText canvasTime_start" readonly type="text" value="" placeholder="" />
							</div>
							<div>结束日期</div>
							<div class="canvasTime">
								<input class="timeText canvasTime_end" readonly type="text" value="" placeholder="" />
							</div>
							<div class="" style="text-align: center;">
								<button type="button" class="mui-btn mui-btn-primary canvasSubmit">确定</button>
								<button type="button" class="mui-btn mui-btn-warning canvasWarn">取消</button>
							</div>
						</div>
					</div>
				</div>
			</aside>
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav gradient_normal">
					<div style="height: 20px;"></div>
					<div class="mui-action-back mui-pull-left mui-icon mui-icon-arrowleft"></div>
					<h1 class="mui-title">
						<span class="equipment_select equipment_selectText">实时数据</span><span class="mui-icon mui-icon-arrowdown equipment_select"></span>
					</h1>
					<!-- <div class="mui-action-menu mui-pull-right mui-icon mui-icon-search searchBtn"></div> -->
				</header>
				<div class="mui-content mui-scroll-wrapper" style="padding-top: 64px;">
					<div class="mui-scroll" style="bottom: 0;top: 64px;">
						<!-- 主界面具体展示内容 -->
						<div class="data_box">
						<!-- 	<div class="data_tab">
								<div class="item active">数据列表</div>
								<div class="item">实时曲线</div>
							</div> -->
							<div class="data_itembox" style="top: 0;">
								<div class="data_item active" id="datalist" style="margin: 0 -0.3rem;">

								</div>
								<div class="data_item">
									<div class="data_chartBox">
										<div class="chart_time">
											<span class="active" data-val="1">本周</span>
											<span data-val="2">本月</span>
											<span data-val="3">上周</span>
											<span data-val="4">上月</span>
										</div>
										<div class="chart">
											<div id="chartBox" style="width: 6.9rem;height:100% ;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/mui.picker.js" type="text/javascript"></script>
		<script src="js/mui.dtpicker.js" type="text/javascript"></script>
		<script src="js/mui.poppicker.js" type="text/javascript"></script>
		<script src="js/rem.js"></script>
		<script src="js/echarts.js"></script>
		<script src="js/datetime.js"></script>
		<script type="text/javascript">
			var _url = "http://112.54.80.235:8038";
			mui.init({
				beforeback: function() {
					var self = plus.webview.currentWebview();
					var href = self.href;
					//获得列表界面的webview
					var list = plus.webview.getWebviewById(href);
					//触发列表界面的自定义事件（refresh）,从而进行数据刷新
					mui.fire(list, 'screen');
					//返回true，继续页面关闭逻辑
					return true;
				}
			});
			mui.plusReady(function() {
				//关闭等待框 
				plus.nativeUI.closeWaiting();
				//竖屏
				plus.screen.unlockOrientation();
				plus.screen.lockOrientation("portrait-primary")
				var self = plus.webview.currentWebview();
				var info = self.info;
				var devicename = info.DeviceNO;

				function getdata(devicename) {
					$.ajax({
						type: "get",
						url: _url + "/actionapi/Users/GetShiShiShuJu",
						dataType: 'json',
						data: {
							SheBeiNo: devicename
						},
						success: function(data) {
							var html = "";
							if (data.Code > 0) {
								var json = data.data;  
								for (var i = 0; i < json.length; i++) {
									html += '<div class="nowitem">';
									var time=json[i].AddTime;
									var time1=time.split("T")[0]
									var time2=time.split("T")[1]
									html += '<div class="title">' + time1 + '&nbsp;&nbsp;' + time2 + '</div>';
									html += '<div class="itemBox">';
									html += '<div class="item">';
									html += '<div class="normal">' + json[i].Q_Feed + '</div>';
									html += '<div>进料量</div>';
									html += '</div>';
									html += '<div class="item">';
									html += '<div class="normal">' + json[i].Q_Water + '</div>';
									html += '<div>用水量</div>';
									html += '</div>';
									html += '<div class="item">';
									html += '<div class="normal">' + json[i].Q_Electricity + '</div>';
									html += '<div>用电量</div>';
									html += '</div>';
									html += '<div class="item">';
									html += '<div class="normal">' + json[i].Q_RDosing + '</div>';
									html += '<div>热洗撬加药量</div>';
									html += '</div>';
									html += '<div class="item">';
									html += '<div class="normal">' + json[i].Q_ZDosing + '</div>';
									html += '<div>震动筛选撬加药量</div>';
									html += '</div>';
									html += '<div class="item">';
									html += '<div class="normal">' + json[i].Q_Filter + '</div>';
									html += '<div>过滤机进料量</div>';
									html += '</div>';
									html += '<div class="item">';
									html += '<div class="normal">' + json[i].Q_Recycling + '</div>';
									html += '<div>循环用水量</div>';
									html += '</div>';
									html += '</div>';
									html += '</div>';

								}
								$("#datalist").html(html);
							}else{
								html='<div class="noData" style="margin-top:30%">暂无数据</div>'
								$("#datalist").html(html);
							}
						},
						error:function(){
							console.log("出错了");
						}
					});
				}
				getdata(devicename);
				//搜索--打开搜索框
				$('.searchBtn').click(function() {
					mui('.mui-off-canvas-wrap').offCanvas('show');
				});
				//下拉
				var setdata = [{
					value: '1',
					text: '实时数据'
				}, {
					value: '2',
					text: '历史数据'
				}]
				var picker = new mui.PopPicker();
				picker.setData(setdata);
				picker.pickers[0].setSelectedIndex(0);
				mui('body').on("tap", ".equipment_select", function() {
					picker.show(function(SelectedItem) {
						if (SelectedItem[0].value == 2) {
							var view = plus.webview.getWebviewById("dataNow.html")
							view.close()
							mui.openWindow({
								url: "dataHistory.html",
								id: "dataHistory.html",
								extras: {
									info: info,
									href:self.href
								},
								waiting: {
									autoShow: true, //自动显示等待框，默认为true
									title: '正在加载...', //等待对话框上显示的提示内容
								}
							});
						}
					})
				});

				//搜索--开始时间
				$('.canvasTime_start').click(function() {
					var strPicker = new mui.DtPicker({
						type: 'date'
					});
					strPicker.show(function(e) {
						$('.canvasTime_start').val(e)
						start = e;
					})
				});
				//搜索--结束时间
				$('.canvasTime_end').click(function() {
					var timestart = $('.canvasTime_start').val();
					var endPicker = new mui.DtPicker({
						type: 'date',
						beginDate: new Date(timestart),
					});
					endPicker.show(function(e) {
						$('.canvasTime_end').val(e)
						end = e;
					})
				});
				//搜索--点击取消搜索按钮
				$('.canvasWarn').click(function() {
					mui('.mui-off-canvas-wrap').offCanvas('close');
				});
				//搜索--点击确定按钮
				mui('body').on('tap', '.canvasSubmit', function() {
					
					mui('.mui-off-canvas-wrap').offCanvas('close');

				});
				$(document).on('tap', '#backdrop', function() {
					//阻止默认事件  
					event.detail.gesture.preventDefault();
					mui('.mui-off-canvas-wrap').offCanvas().close();
				})
				// $('.data_tab .item').click(function() {
				// 	var index = $(this).index();
				// 	$(this).addClass('active').siblings().removeClass('active');
				// 	$('.data_itembox .data_item').eq(index).addClass('active').siblings().removeClass('active');
				// 	if (index == 1) {
				// 		//折线图初始化
				// 		chart()
				// 	}
				// });
				//时间选择
				$('.chart_time span').click(function() {
					$(this).addClass("active").siblings().removeClass("active");
					var val = $(this).attr("data-val");
					//console.info(val);
					var s = "";
					var e = "";
					if (val == 1) {
						s = getWeekStartDate();
						e = getWeekEndDate();
						//console.info(s);
						//console.info(e);

					}
					if (val == 2) {
						s = getMonthStartDate();
						e = getMonthEndDate();
						console.info(s);
						console.info(e);
					}
					if (val == 3) {
						s = getLastWeekStartDate();
						e = getLastWeekEndDate();
						console.info(s);
						console.info(e);
					}
					if (val == 4) {
						s = getLastMonthStartDate();
						e = getLastMonthEndDate();
						console.info(s);
						console.info(e);
					}
					$.ajax({
						type: "",
						url: "",
						data: {},
						success: function() {

						}
					})
				});


				//排序
				// $('.nowSort .item').click(function() {
				// 	if (!$(this).hasClass("show")) {
				// 		$(this).addClass("show").siblings().removeClass("show")
				// 	}
				// });
				//曲线






				var xdata = "";
				var vdata = "";
				$.ajax({
					type: "get",
					url: _url + "/actionapi/Users/GetEchartMenu",
					data: {},
					success: function(data) {
						var datas = data.data;
						xdata = datas;
						vdata = data.data1;
						//console.log(JSON.stringify(vdata));
					}
				});

				function chart() {

					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('chartBox'));
					//console.info(xdata)
					// 指定图表的配置项和数据
					var option = {
						title: {},
						tooltip: {},
						legend: {
							data: ['进料量', '用水量', '用电量', '加药量', '过滤机进料量', '循环用水量'],
							left: "center",
							top: '10'
						},
						xAxis: {
							data: xdata
						},
						yAxis: {
							type: 'value'
						},
						series: vdata
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}
			})
		</script>
	</body>

</html>
